<template>
    <div class="action-dislike" @click="dislikeClick" ga_event="dislike_click">
        <tt-icon type="close_small" color="#ddd" size="16"></tt-icon>
        不感兴趣
    </div>
</template>

<style lang="less">
    .action-dislike {
        position: relative;
        color: transparent;
        cursor: pointer;
        width: 20px;
        height: 20px;
        line-height: 20px;
        overflow: hidden;
        padding-right: 20px;
        padding-left: 8px;
        transition: width .3s ease;
        white-space: nowrap;
        z-index: 2;

        >i {
            position: absolute;
            top: 2px;
            right: 0;
        }

        &:hover {
            background-color: #f85959;
            border-radius: 4px;
            color: #fff;
            font-size: 12px;
            width: 72px;
            i {
                color: #fff !important;
            }
        }
    }
</style>

<script>
  import reqwest from 'reqwest';
  import Emitter from '../../../../src/mixins/emitter.js';
  import checkLogin from '../../../../src/js/user.js';

  export default {
    name: 'Dislike',
    mixins: [ Emitter ],
    
    props: {
      group_id: {
        type: String,
        default: ''
      },
      dislikeUrl: {
        type: String,
        default: '/api/dislike/'
      },
      getUserInfoUrl: {
        type: String,
        default: '/user/info/'
      },
      dispatchTarget: {
        type: String,
        default: 'FeedBox'
      }
    },
    components: {
    },
    methods: {
      dislikeClick() {
        checkLogin({
          successCb: ()=>{
            this._disLike();
          },
          url: this.getUserInfoUrl
        });
      },
      _disLike(data) {
        reqwest({
          url: this.dislikeUrl,
          method: 'POST',
          data: {
            group_id: this.group_id,
            action: 'dislike',
            app_name: 'toutiao_web'
          },
          success: (res) => {
            let data = res || {},
              msg = '不好意思，网络错误';

            if (data.message == 'success') {
              this.dispatch(this.dispatchTarget, 'feed-item-dislike', this.group_id);
              msg = '将减少推荐类似内容';
            }

            this.$Toast({
              message: msg,
              position: 'middle'
            })
          }
        });
      }
    }
  };
</script>



// WEBPACK FOOTER //
// dislike.vue?870022cc
